/* ------------------------------------------------------------------------------
*
*  # Buttons component
*
*  Overrides for buttons bootstrap component
*
*  Version: 1.1
*  Latest update: Mar 10, 2016
*
* ---------------------------------------------------------------------------- */

// Base styles
// -------------------------

.btn {
  position: relative;

  // Remove outline
  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
      outline: 0;
    }
  }

  // Firefox fix
  &::-moz-focus-inner {
    border: 0;
  }

  // Hover state
  &:hover,
  &:focus,
  &.focus {
    .box-shadow(0 0 0 100px fade(#000, 5%) inset); // Use box shadow instead of color for all buttons - contextual and custom
  }

  // Active state
  &:active,
  &.active {
    .box-shadow(0 0 0 100px fade(#000, 10%) inset); // The same as above - no color changes, only box shadow
  }

  // Custom color buttons
  &[class*=bg-] {
    &:hover,
    &:focus,
    &.focus {
      color: #fff;
    }
  }

  // Correct line heights in smaller text sizes
  &.text-size-small {
    line-height: @line-height-small;
  }
  &.text-size-mini {
    line-height: @line-height-mini;
  }
}

// Button styling
// -------------------------

// Default button
.btn-default {

  // Hover/focus states
  &:hover,
  &:focus,
  &.focus {
    .box-shadow(0 0 0 100px fade(#000, 1%) inset); // Use box shadow instead of color for all buttons - contextual and custom
  }

  // Active state
  &:active,
  &.active {
    .box-shadow(0 0 0 100px fade(#000, 3%) inset); // The same as above - no color changes, only box shadow
  }
}

// Labeled button
.btn-labeled {
  padding-left: (((@line-height-computed - @icon-font-size + @padding-base-vertical - 1) * 2) + @icon-font-size) + @padding-base-horizontal;

  // Default button
  &.btn-default {
    > b {
      background-color: @brand-primary;
      color: #fff;
    }
  }

  // Icon
  > b {
    position: absolute;
    top: -1px;
    left: -1px;
    background-color: fade(#000, 15%);
    display: block;
    line-height: 1;
    padding: ((@line-height-computed - @icon-font-size + @padding-base-vertical - 1));
    .border-left-radius(@border-radius-base);

    // Center icon vertically
    > i {
      top: 0;
    }
  }

  // Right icon
  &.btn-labeled-right {
    padding-left: @padding-base-horizontal;
    padding-right: (((@line-height-computed - @icon-font-size + @padding-base-vertical - 1) * 2) + @icon-font-size) + @padding-base-horizontal;

    > b {
      left: auto;
      right: -1px;
      .border-left-radius(0);
      .border-right-radius(@border-radius-base);
    }
  }

  // Extra large
  &.btn-xlg {
    padding-left: (((@line-height-computed - @icon-font-size + @padding-xlarge-vertical - 1) * 2) + @icon-font-size) + @padding-xlarge-horizontal;

    > b {
      padding: ((@line-height-computed - @icon-font-size + @padding-xlarge-vertical - 1));
    }

    &.btn-labeled-right {
      padding-left: @padding-xlarge-horizontal;
      padding-right: (((@line-height-computed - @icon-font-size + @padding-xlarge-vertical - 1) * 2) + @icon-font-size) + @padding-xlarge-horizontal;
    }
  }

  // Large
  &.btn-lg {
    padding-left: (((@line-height-computed - @icon-font-size + @padding-large-vertical - 1) * 2) + @icon-font-size) + @padding-large-horizontal;

    > b {
      padding: ((@line-height-computed - @icon-font-size + @padding-large-vertical - 1));
    }

    &.btn-labeled-right {
      padding-left: @padding-large-horizontal;
      padding-right: (((@line-height-computed - @icon-font-size + @padding-large-vertical - 1) * 2) + @icon-font-size) + @padding-large-horizontal;
    }
  }

  // Small
  &.btn-sm {
    padding-left: (((@line-height-computed - @icon-font-size + @padding-small-vertical - 1) * 2) + @icon-font-size) + @padding-small-horizontal;

    > b {
      padding: ((@line-height-computed - @icon-font-size + @padding-small-vertical - 1));
    }

    &.btn-labeled-right {
      padding-left: @padding-small-horizontal;
      padding-right: (((@line-height-computed - @icon-font-size + @padding-small-vertical - 1) * 2) + @icon-font-size) + @padding-small-horizontal;
    }
  }

  // Mini
  &.btn-xs {
    padding-left: (((@line-height-computed - @icon-font-size + @padding-xs-vertical - 1) * 2) + @icon-font-size) + @padding-xs-horizontal;

    > b {
      padding: ((@line-height-computed - @icon-font-size + @padding-xs-vertical - 1));
    }

    &.btn-labeled-right {
      padding-left: @padding-xs-horizontal;
      padding-left: (((@line-height-computed - @icon-font-size + @padding-xs-vertical - 1) * 2) + @icon-font-size) + @padding-xs-horizontal;
    }
  }
}

// Flat button
.btn-flat {
  border-width: 2px;
  background-color: transparent;

  // Hover/focus states
  &:hover,
  &:focus {
    .opacity(0.8);
    .box-shadow(none);
  }

  // Active state
  &:active {
    .opacity(0.95);
  }

  // Remove shadow in open dropdown button
  .btn-group.open .dropdown-toggle& {
    .box-shadow(none);
  }
}

// Icon button
.btn-icon {
  padding-left: ((@line-height-computed - @icon-font-size + @padding-base-vertical - 1) - 1);
  padding-right: ((@line-height-computed - @icon-font-size + @padding-base-vertical - 1) - 1);

  &.icon-2x {
    padding-left: @padding-base-vertical;
    padding-right: @padding-base-vertical;

    > i {
      font-size: (@icon-font-size * 2);
      top: 0;
    }

    // Sizing
    &.btn-xlg {
      padding-left: @padding-xlarge-vertical;
      padding-right: @padding-xlarge-vertical;
    }
    &.btn-lg {
      padding-left: @padding-large-vertical;
      padding-right: @padding-large-vertical;
    }
    &.btn-sm {
      padding-left: @padding-small-vertical;
      padding-right: @padding-small-vertical;
    }
    &.btn-xs {
      padding-left: @padding-xs-vertical;
      padding-right: @padding-xs-vertical;
    }
  }

  // Sizing
  &.btn-xlg,
  .input-group-xlg > .input-group-btn > & {
    padding-left: ((@line-height-computed - @icon-font-size + @padding-xlarge-vertical - 1) - 1);
    padding-right: ((@line-height-computed - @icon-font-size + @padding-xlarge-vertical - 1) - 1);
  }
  &.btn-lg,
  .input-group-lg > .input-group-btn > & {
    padding-left: ((@line-height-computed - @icon-font-size + @padding-large-vertical - 1) - 1);
    padding-right: ((@line-height-computed - @icon-font-size + @padding-large-vertical - 1) - 1);
  }
  &.btn-sm,
  .input-group-sm > .input-group-btn > & {
    padding-left: ((@line-height-computed - @icon-font-size + @padding-small-vertical - 1) - 1);
    padding-right: ((@line-height-computed - @icon-font-size + @padding-small-vertical - 1) - 1);
  }
  &.btn-xs,
  .input-group-xs > .input-group-btn > .btn& {
    padding-left: ((@line-height-computed - @icon-font-size + @padding-xs-vertical - 1) - 1);
    padding-right: ((@line-height-computed - @icon-font-size + @padding-xs-vertical - 1) - 1);
  }
}

// Float button
.btn-float {
  padding: @btn-float-padding;
  white-space: normal;
  border-radius: @border-radius-base;

  // Transparent button
  &.btn-link {
    padding: (@btn-float-padding - 5);
  }

  // Icon
  i {
    display: block;
    margin: 0;
    top: 0;
  }

  // Image
  img {
    border-radius: @border-radius-base;
  }

  // Text
  > span {
    display: block;
    padding-top: (@line-height-computed / 2);
    margin-bottom: -((@line-height-computed / 2) - 4);
  }

  // Double icon size in large button
  &.btn-float-lg i {
    font-size: (@icon-font-size * 2);
  }
}

// Link button
.btn-link {
  color: @text-color;

  // Remove shadows
  &,
  &:hover,
  &:focus,
  &:active {
    .box-shadow(none);
  }
}

// Rounded button
.btn-rounded {
  &,
  &.btn-labeled > b,
  img {
    border-radius: 100px;
  }
}

// Block button
.btn-block + .btn-block {
  margin-top: (@line-height-computed / 2);
}

// Contextual classes.
// Override all styles
// to avoid BS mixin changes
// -------------------------

// Default appears as lighter grey
.btn-default {
  &:focus,
  &.focus,
  &:hover {
    background-color: @btn-default-bg;
    border-color: @btn-default-border;
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-color: @btn-default-bg;
    border-color: @btn-default-border;

    &:hover,
    &:focus,
    &.focus {
      background-color: @btn-default-bg;
      border-color: @btn-default-border;
    }
  }
  &.disabled {
    .box-shadow(none);
  }
}

// Primary appears as blue
.btn-primary {
  &:focus,
  &.focus,
  &:hover {
    background-color: @btn-primary-bg;
    border-color: @btn-primary-border;
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-color: @btn-primary-bg;
    border-color: @btn-primary-border;

    &:hover,
    &:focus,
    &.focus {
      background-color: @btn-primary-bg;
      border-color: @btn-primary-border;
    }
  }
  &.disabled {
    .box-shadow(none);
  }
}

// Success appears as green
.btn-success {
  &:focus,
  &.focus,
  &:hover {
    background-color: @btn-success-bg;
    border-color: @btn-success-border;
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-color: @btn-success-bg;
    border-color: @btn-success-border;

    &:hover,
    &:focus,
    &.focus {
      background-color: @btn-success-bg;
      border-color: @btn-success-border;
    }
  }
  &.disabled {
    .box-shadow(none);
  }
}

// Info appears as light blue
.btn-info {
  &:focus,
  &.focus,
  &:hover {
    background-color: @btn-info-bg;
    border-color: @btn-info-border;
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-color: @btn-info-bg;
    border-color: @btn-info-border;

    &:hover,
    &:focus,
    &.focus {
      background-color: @btn-info-bg;
      border-color: @btn-info-border;
    }
  }
  &.disabled {
    .box-shadow(none);
  }
}

// Warning appears as orange
.btn-warning {
  &:focus,
  &.focus,
  &:hover {
    background-color: @btn-warning-bg;
    border-color: @btn-warning-border;
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-color: @btn-warning-bg;
    border-color: @btn-warning-border;

    &:hover,
    &:focus,
    &.focus {
      background-color: @btn-warning-bg;
      border-color: @btn-warning-border;
    }
  }
  &.disabled {
    .box-shadow(none);
  }
}

// Danger and error appear as red
.btn-danger {
  &:focus,
  &.focus,
  &:hover {
    background-color: @btn-danger-bg;
    border-color: @btn-danger-border;
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-color: @btn-danger-bg;
    border-color: @btn-danger-border;

    &:hover,
    &:focus,
    &.focus {
      background-color: @btn-danger-bg;
      border-color: @btn-danger-border;
    }
  }
  &.disabled {
    .box-shadow(none);
  }
}

// Button size overrides
// -------------------------

// XLarge button
.btn-xlg {
  .button-size(@padding-xlarge-vertical; @padding-xlarge-horizontal; @font-size-large; @line-height-large; @border-radius-base);

  &.btn-rounded {
    border-radius: 100px;
  }
}

// Large button
.btn-lg {
  border-radius: @border-radius-base;

  &.btn-rounded {
    border-radius: 100px;
  }
}

// Border radius override
.btn-sm:not(.btn-rounded),
.btn-group-sm > .btn:not(.btn-rounded),
.btn-xs:not(.btn-rounded),
.btn-group-xs > .btn:not(.btn-rounded) {
  border-radius: @border-radius-base;
}

